<template>
  <el-dialog v-model="ifShow" title="订单日志" width="1200" :before-close="handleCancel">
    <div class="container">
      <div v-for="(item, i) in logoInfo" :key="i" class="info">
        <div>
          <div style="display: flex; align-items: center">
            <div>{{ item.createTime }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.title }}</div>
            <el-button
              style="margin-left: 10px"
              @click="handleLookMap(item)"
              v-if="item.title == '司机出发' || item.title == '司机就位' || item.title == '开始服务' || item.title == '服务完成'"
              type="primary"
            >
              查看位置
            </el-button>
          </div>
          <div v-if="item.show" id="show-map" style="height: 400px; width: 1000px"></div>

          <div v-if="item.url">
            <audio controls ref="audio" class="aud">
              <source :src="item.url" />
            </audio>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleOk">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import CommonApi from "@/api/common";
import OrderApi from "@/api/order";
import AMapLoader from "@amap/amap-jsapi-loader";
import driverLogo from "@/assets/driverAddress.png";
import logo1 from "@/assets/from.png";
import logo2 from "@/assets/to.png";
import { ref, nextTick } from "vue";

const ifShow = ref(false);
const logoInfo = ref<any[]>([]);
const orderInfo = ref();
const map = ref<any>(null);

function edit(row: any) {
  orderInfo.value = row;
  logoInfo.value = [];
  ifShow.value = true;
  OrderApi.getLogs({ orderId: row.id }).then((data) => {
    if (data.code == 0) {
      logoInfo.value = data.result.map((item: any) => ({
        ...item,
        show: false,
      }));
    }
  });
}

const initMap = (row: any) => {
  AMapLoader.load({
    key: "3e4c1f76807c5beae8aef6c4a6af69dd",
    version: "2.0",
    plugins: ["AMap.Polygon", "AMap.PolyEditor", "AMap.PolygonEditor"],
  })
    .then((AMap) => {
      let mapContainer = document.getElementById("show-map");
      if (!mapContainer) {
        console.error("地图容器未找到");
        return;
      }

      map.value = new AMap.Map(mapContainer, {
        zoom: 14,
        center: row.centerAddress ? row.centerAddress : row.from,
      });
      if (row.centerAddress) {
        const marker = new AMap.Marker({
          position: row.centerAddress,
          content: `<img src="${driverLogo}" style="width:50px;height:50px;border-radius: 50%;" alt="司机位置" />`,
          map: map.value,
        });
      }

      const marker2 = new AMap.Marker({
        position: row.from,
        content: `<img src="${logo1}" style="width:50px;height:50px;border-radius: 50%;" alt="起点" />`,
        map: map.value,
      });
      const marker3 = new AMap.Marker({
        position: row.to,
        content: `<img src="${logo2}" style="width:50px;height:50px;border-radius: 50%;" alt="终点" />`,
        map: map.value,
      });
    })
    .catch((error) => {
      console.error("地图加载失败:", error);
    });
};

function handleLookMap(row: any) {
  // 关闭其他所有地图
  logoInfo.value.forEach((item) => {
    if (item !== row) {
      item.show = false;
    }
  });

  // 切换当前地图的显示状态
  row.show = !row.show;
  // 如果当前地图是打开状态，初始化地图
  if (row.show) {
    nextTick(() => {
      initMap(row);
    });
  } else {
    // 如果当前地图是关闭状态，销毁地图实例
    if (map.value) {
      map.value.destroy();
      map.value = null;
    }
  }

  nextTick(() => {
    console.log("reerre", row.data);

    let obj: any = {
      from: [orderInfo.value.fromLng, orderInfo.value.fromLat],
      to: [orderInfo.value.toLng, orderInfo.value.toLat],
      title: row.title,
    };
    if (row.data.longitude) {
      obj.centerAddress = [row.data.longitude, row.data.latitude];
    }

    initMap(obj);
  });
}

function handleOk() {
  ifShow.value = false;
}

function handleCancel() {
  ifShow.value = false;
}

defineExpose({
  edit,
});
</script>

<style lang="scss" scoped>
.container {
  font-size: 16px;
  padding: 14px;
  .info {
    margin-top: 22px;
    .aud {
      margin-top: 14px;
      width: 38%;
    }
  }
}
</style>
